<template>
    <div  class="bm-view">
        <el-amap
            :center="mapConfig.center"
            :zoom="mapConfig.zoom"
            @init="init"
            @click="click"
        >
            <!-- 标记 -->
            <el-amap-marker v-for="(marker, index) in markers" :position="marker" :key="index"></el-amap-marker>
            <!-- 搜索 -->
            <el-amap-search-box
                v-if="showSearch"
                :visible="visible"
                :debounce="1000"
                @select="selectPoi"
                @choose="choosePoi"
            />
        </el-amap>
    </div>
</template>

<script>
/**
 * 高德地图
 * https://vue-amap.guyixi.cn/zh-cn/introduction/install.html
 */
import VueAMap,{initAMapApiLoader,lazyAMapApiLoaderInstance,ElAmap,ElAmapMarker,ElAmapSearchBox} from '@vuemap/vue-amap';
import '@vuemap/vue-amap/dist/style.css'

export default {
    name: "amap-map-view",
    components: {VueAMap,ElAmap,ElAmapMarker,ElAmapSearchBox},
    emits:["ready","update:modelValue","valueChange","click"],
    props: {
        //控件值
        modelValue:{},
        //配置
        config:{},
        //搜索
        showSearch: {
            type:Boolean,
            default: true
        },
        //是否只读
        readonly: {
            type:Boolean,
            default: false
        },
    },
    data() {
        return {
            //地图返回值 "{longitude:经度,latitude:维度,address:'详细地址'}"
            mapValue:"",
            mapConfig:{},
            location:{
                lng: 113.331081,
                lat: 23.112153
            },
            address:"",
            markers:[],//标记
            //搜索地址
            searchAddress:"",
            visible: true
        }
    },
    created() {
        this.mapConfig=this.config;
        if(this.modelValue) {
            this.mapValue = this.modelValue;
            let obj = JSON.parse(this.mapValue);
            this.location.lng = obj.longitude;
            this.location.lat = obj.latitude;
            this.address = obj.address;
            let point=[this.location.lng, this.location.lat];
            this.markers.push(point);
            this.mapConfig.center =point;
        }
        initAMapApiLoader(this.mapConfig);
    },
    methods: {
        init(map) {
            this.$emit('ready',map);
        },
        switchVisible() {
            this.visible = !this.visible;
        },
        //搜索点击
        selectPoi(e){
            let point=[e.poi.location.lng, e.poi.location.lat];
            this.markers = []
            this.markers.push(point);
            this.mapConfig.center =point;
            this.setMapValue({
                lng: e.poi.location.lng,
                lat:e.poi.location.lat,
                address:e.poi.name,
            });
        },
        //搜索下移
        choosePoi(e){
            let point=[e.poi.location.lng, e.poi.location.lat];
            this.markers = []
            this.markers.push(point);
            this.mapConfig.center =point;
            this.setMapValue({
                lng: e.poi.location.lng,
                lat:e.poi.location.lat,
                address:e.poi.name,
            });
        },
        //设置值
        setMapValue(res){
            this.location.lng  = res.lng;
            this.location.lat  =res.lat;
            this.address = res.address;
            this.searchAddress = res.address;
            this.mapValue=JSON.stringify(
                {
                    longitude:this.location.lng,
                    latitude:this.location.lat,
                    address:this.address
                }
            )
        },
        //点击获取地址的数据
        click(e) {
            if(this.readonly){
                return;
            }
            let self=this;
            this.markers = []
            let {lng, lat} = e.lnglat
            this.location.lng = lng
            this.location.lat = lat
            this.mapConfig.center = [lng, lat]
            this.markers.push([lng, lat])
            lazyAMapApiLoaderInstance.then(() => {
                //地址逆解析插件
                AMap.plugin("AMap.Geocoder", () => {
                    let geoCoder = new AMap.Geocoder({
                        radius: 1000,
                        extensions: 'all'
                    });
                    geoCoder.getAddress([lng, lat], function (status, result) {
                        if (status === 'complete' && result.info === 'OK') {
                            if (result && result.regeocode) {
                                let obj={
                                    lng: result.regeocode.pois[0].location.lng,
                                    lat:result.regeocode.pois[0].location.lat,
                                    address: result.regeocode.formattedAddress,
                                }
                                self.setMapValue(obj);
                                self.$nextTick();
                                self.$emit("click",e);
                            }
                        }
                    })
                })
            });
        },
    },
    watch: {
        mapValue:function (val){
            this.$emit("update:modelValue",val);
            this.$emit('valueChange',val);
        },
    },
}
</script>

<style scoped>
.bm-view {
    width: 100%;
    height: 500px;
}
</style>
